<template>
  <div class="MessageManagement-GroupNotice height100">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('views.Message.GroupNotice.50ynwwxfkj40')}}</span>
      </div>
      <div class="cr-head-right fs14">
        <el-button type="primary" size="mini" @click="publish">{{$t('views.Message.GroupNotice.50ynwwxflzk0')}}</el-button>
        <span
          class="el-icon-close backCss"
          style="font-size: 20px;margin-left: 10px;color: #F78F0E;"
          @click="linkProp"
        ></span>
      </div>
    </div>
    <div class="content-box bg-white flex1 pt20 pb20">
      <el-form :model="form" label-width="100px" ref="addform" class="form-box">
        <el-form-item :label="$t('views.Message.GroupNotice.50ynwwxfmc00')" prop="title" :rules="[{ required: true, message: $t('views.Message.GroupNotice.50ynwwxfmmw0') }]">
          <el-input v-model.trim="form.title" clearable :placeholder="$t('views.Message.GroupNotice.50ynwwxfmmw0')" style="width:260px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('views.Message.GroupNotice.50ynwwxfmxc0')" prop="type" :rules="[{ required: true, message: $t('views.Message.GroupNotice.50ynwwxfn8w0') }]">
          <el-select clearable v-model.trim="form.type" :placeholder="$t('views.Message.GroupNotice.50ynwwxfn8w0')" style="width:260px">
            <el-option
              :label="item.noticetype_name"
              :value="item.noticetype_id"
              v-for="item in notice.list"
              :key="item.noticetype_id"
            >{{ item.noticetype_name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('views.Message.GroupNotice.50ynwwxfnj40')" prop="content" :rules="[{ required: true, message: $t('views.Message.GroupNotice.50zc6xarl0w0') }]">
          <VueNeditorWrap
            ref="ueditor"
            v-model.trim="form.content"
            :destroy="false"
            :config="config"
            @ready="loadUeditor"
          ></VueNeditorWrap>
        </el-form-item>
        <el-form-item :label="$t('views.Message.GroupNotice.50ynwwxfnvw0')" prop="pic" :rules="[{ required: false, message: $t('views.Message.GroupNotice.50zc6xarnss0') }]">
          <el-upload
            class="upload-demo"
            :action="`${$urls.gmcApiUrl}/Uploading/File`"
            :before-upload="beforeAvatarUpload"
            :data="postData"
            :show-file-list="true"
            :on-success="success"
            name="ossfile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="multiple"
            :limit="10"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="default">{{$t('views.Message.GroupNotice.50ynwwxfo6c0')}}</el-button>
          </el-upload>
          <p
            class="fs12 color-aaa"
            style="line-height:21px"
          >{{$t('views.Message.GroupNotice.50ynwwxfogg0')}} 20M {{$t('views.Message.GroupNotice.50zc6xaroes0')}}</p>
        </el-form-item>
        <!-- <el-form-item label="选择职务：" prop="workType" :rules="[{ required: true, message: '请选择职务' }]"> -->
        <el-form-item :label="$t('views.Message.GroupNotice.50ynwwxfoqc0')">
          <el-input
            v-model.trim="form.workTypeTxt"
            ref="chooseWorkRange"
            clearable
            @focus="chooseWorkRange"
            :placeholder="$t('views.Message.GroupNotice.50ynwwxfp1g0')"
            style="width:260px"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择职务  侧边弹窗---->
    <el-drawer
      :title="$t('views.Message.GroupNotice.50ynwwxfp1g0')"
      :visible.sync="editWorkVisible"
      direction="rtl"
      size="600px"
      :modal="false"
      custom-class="pop-slider--box editWork-box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button type="primary" size="mini" @click="editWorkVisible = false">{{$t('views.Message.GroupNotice.50ynwwxfpbw0')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <div class="publish_box">
          <div class="publish_b__lf">
            <p class="p_title">{{$t('views.Message.GroupNotice.50ynwwxfpmo0')}}</p>
            <el-checkbox
              :indeterminate="isIndeterminate1"
              v-model="checkWorkAll"
              @change="handlecheckWorkAllChange"
            >{{$t('views.Message.GroupNotice.50ynwwxfpxc0')}}</el-checkbox>
            <el-checkbox-group v-model="post.workSeled" @change="handleCheckWorkAll">
              <el-checkbox
                v-for="(item, index) in post.result"
                :label="item.post_id"
                :key="index"
              >{{ item.post_name }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="publish_b__rt">
            <p class="p_title">{{$t('views.Message.GroupNotice.50ynwwxfq900')}}</p>
            <el-checkbox-group v-model="post.workIdSeled" @change="handleSchoolSeledChange1">
              <el-checkbox
                v-for="(item, index) in post.workSeledArr"
                :label="item.post_id"
                :key="index"
              >
                <em class="icon"></em>
                <span
                  style="max-width: 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                >{{ item.post_name }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 1、引入VueUeditorWrap组件
import VueNeditorWrap from "vue-neditor-wrap";
import noticeHttp from "./notice";
import httpApi from "../../utils/http";

export default {
  name: "PersonManage-staffManage",
  components: {
    VueNeditorWrap
  },
  data() {
    return {
      editWorkVisible: false, //选择职务
      config: {
        UEDITOR_HOME_URL: "/NEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "",
        wordCount: false,
        elementPathEnabled: false,
        toolbars: [
          [
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            // "|",
            // "forecolor",
            // "backcolor",
            // "insertorderedlist",
            // "insertunorderedlist",
            // "selectall",
            // "cleardoc",
            // "|",
            // "rowspacingtop",
            // "rowspacingbottom",
            // "lineheight",
            // "|",
            // "customstyle",
            // "paragraph",
            "fontfamily",
            "fontsize"
            // "|",
            // "directionalityltr",
            // "directionalityrtl",
            // "indent",
            // "|",
            // "justifyleft",
            // "justifycenter",
            // "justifyright",
            // "justifyjustify",
            // "|",
            // "touppercase",
            // "tolowercase",
            // "|",
            // "link",
            // "unlink",
            // "anchor"
          ]
        ]
      },
      form: {
        title: "",
        type: "",
        content: "",
        pic: "",
        range: "",
        workType: "",
        filedata: [],
        workTypeTxt: this.$t('views.Message.GroupNotice.50ynwwxfqjs0')
      },
      notice: {
        list: [],
        id: ""
      },
      fileList: [
        // {
        //   name: "test.png",
        //   url:
        //     "http://kedingdang.oss-cn-shanghai.aliyuncs.com/schoolmanage/201911221703x404382444.png"
        // }
      ],
      postData: {},
      multiple: true,
      //选择职务*****start
      checkWorkAll: false, //是否全选
      isIndeterminate1: true,
      // 选择职务列表
      post: {
        result: [],
        workSeled: [],
        workIdSeled: [],
        workSeledArr: []
      }
      //选择职务*****end
    };
  },
  created() {
    this.slider = this.$store.state.Slider;
    this.postData = {
      ossfile: "",
      company_id: this.$Tool.getStorage('COMPANY_ID')
    };
    this.getNoticeTypeList();
    this.getPostList();
  },
  watch: {},
  computed: {},
  methods: {
    linkProp() {
      this.$router.go(-1);
    },
    // 获取获取职务列表
    getPostList() {
      httpApi
        .getPostList({
          post_type: 0
        })
        .then(res => {
          console.log(res);
          // this.notice.list = res.data.result.list;
          this.post.result = res.data.result.list;
        });
    },
    //获取下拉框列表
    getNoticeTypeList() {
      httpApi
        .getNoticeTypeList({
          noticetype_class: 0
        })
        .then(res => {
          console.log(res);
          this.notice.list = res.data.result.list;
        });
    },
    // 页码变化
    curPageChange(v) {
      this.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.curPage = 1;
    },
    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    // 文件上传******start
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(
        `${this.$t('views.Message.GroupNotice.add1')} ${files.length} 个${this.$t('views.Message.GroupNotice.add2')} ${files.length} ${this.$t('views.Message.GroupNotice.add3')}`
      );
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      return this.$confirm(`${this.$t('views.Message.GroupNotice.add4')} ${file.name}？`);
    },
    success(res, file) {
      console.log(res, "wangwangwang", file);

      let fileObj = {};
      if (res.error == 0) {
        this.form.pic = res.result.file_url;
        fileObj.name = file.name;
        fileObj.url = res.result.file_url;
        if (file.name.split(".")[file.name.split(".").length - 1] == "pptx") {
          fileObj.url = res.result.file_url + "pptx";
        }
        this.form.filedata.push(fileObj);
      }
      console.log(this.form.filedata);
    },
    // 文件上传******end
    // 富文本编辑器
    loadUeditor(p) {
      console.log(p);
    },
    // 选择职务
    chooseWorkRange() {
      this.$refs["chooseWorkRange"].blur();
      this.editWorkVisible = true;
    },
    // 选择职务*****弹框关闭
    hideworkSliderBox() {
      this.editWorkVisible = !this.editWorkVisible;
    },
    // 选择职务****点击全选
    handlecheckWorkAllChange(v) {
      console.log(v);
      let ids = [];
      this.post.result.forEach(e => {
        ids.push(e.post_id);
      });
      this.post.workSeled = v ? ids : [];

      if (this.post.workSeled.length > 0) {
        this.post.workSeledArr = [].concat(this.post.result);
        this.post.workSeledArr.forEach(e => {
          this.post.workIdSeled.push(e.post_id);
        });
      } else {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
      }
      console.log(this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `${this.$t('views.Message.GroupNotice.add5')}${this.form.workType.length}${this.$t('views.Message.GroupNotice.add6')}`;
    },
    // 选择职务****点击未选择的职务选择框
    handleCheckWorkAll(v) {
      let checkedCount = v.length;
      this.checkAll = checkedCount === this.post.result.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.post.result.length;

      let ids = [];
      this.post.result.forEach(e => {
        ids.push(e.post_id);
      });

      console.log(v);
      if (v.length > 0) {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
        this.post.result.forEach(_e1 => {
          // 选中 园所范围
          v.forEach(_e2 => {
            if (_e1.post_id == _e2) {
              this.post.workSeledArr = this.post.workSeledArr.concat(_e1);
            }
          });
        });
        if (this.post.workSeledArr.length > 0) {
          this.post.workSeledArr.forEach(e => {
            // 选中 园所id
            this.post.workIdSeled.push(e.post_id);
          });
        }
      } else {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
      }
      console.log(this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `${this.$t('views.Message.GroupNotice.add5')}${this.form.workType.length}${this.$t('views.Message.GroupNotice.add6')}`;
    },
    // 选择职务****点击已选择的职务选择框
    handleSchoolSeledChange1(v) {
      console.log(v, this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `${this.$t('views.Message.GroupNotice.add5')}${this.form.workType.length}${this.$t('views.Message.GroupNotice.add6')}`;
    },
    // 发布提交
    publish() {
      this.$refs["addform"].validate(valid => {
        if (valid) {
          console.log(this.form, "---------------------");
          noticeHttp
            .publishNewsAction({
              noticetype_id: this.form.type,
              notice_title: this.form.title,
              notice_filelist: JSON.stringify(this.form.filedata),
              notice_connet: this.form.content,
              notice_class: 0,
              // post_list: JSON.stringify(this.form.workType)
              // post_list: (this.form.workType).join(',')
              post_list: this.form.workType ? this.form.workType.join(",") : ""
            })
            .then(res => {
              console.log(res);
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.$router.go(-1);
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      done();
    },
    beforeAvatarUpload() {
      console.log(this.postData);
      console.log(this.$t('views.Message.GroupNotice.50ynwwxfqtw0'));
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 52
        );
      }
    });
  }
};
</script>

<style lang="less">
.MessageManagement-GroupNotice {
  .form-box {
    width: 80%;
  }
}
// 侧边栏样式
.editWork-box {
  .slider-content {
    padding: 0px;
    height: calc(100% - 50px);
    // 选择职务列表
    .publish_box {
      display: flex;
      height: 100%;
      padding: 0px 20px 0px 20px;
      border-top: 1px solid #ddd;
      height: 100%;
      .p_title {
        padding: 20px 0;
        line-height: 30px;
        font-size: 16px;
        color: #333;
      }
      .publish_b__lf {
        flex: 1;
        border-right: 1px solid #ddd;
        padding-bottom: 20px;
        overflow-y: auto;
        .el-checkbox {
          display: block;
          margin-bottom: 10px;
          & + .el-checkbox {
            margin-left: 0;
          }
        }
      }
      .publish_b__rt {
        flex: 1;
        padding: 0 0 20px 20px;
        .el-checkbox {
          display: flex;
          margin-bottom: 12px;
          align-items: center;
          flex-direction: row-reverse;
          justify-content: space-between;
          margin-right: 0px;
          & + .el-checkbox {
            margin-left: 0;
          }
          .el-checkbox__label {
            padding-left: 0;
            display: flex;
            align-items: center;
            .icon {
              width: 16px;
              height: 12px;
              margin-right: 10px;
              background: url(../../assets/images/icon/p-icon.png) center center
                no-repeat;
            }
          }
        }
      }
      .selected_list {
        .row {
          display: flex;
          margin-bottom: 15px;
          justify-content: space-between;
          align-items: center;
          line-height: 19px;
          font-size: 14px;
          color: #333;
          .conts {
            display: flex;
            align-items: center;
            .icon {
              width: 13px;
              height: 13px;
              margin-right: 5px;
              background-color: green;
            }
          }
          .close {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.backCss {
  cursor: pointer;
  vertical-align: center;
}
</style>
